<template>
  <Charts ref="charts" style="height: 400px;" :option="option" />
</template>

<script>
import { ref, watch } from 'vue'
import app from '@/app'
import model from '../model'
import Charts from '@/components/charts'

export default {
  components: {
    Charts
  },
  setup() {
    const plugin = app.plugin.index
    const charts = ref()

    // 列表
    const pay = model.pay

    // 图表框架
    const buildCharts = () => {
      const data = {
        tooltip: {
          trigger: 'item',
          valueFormatter: value => app.money(value)
        },
        legend: {
          bottom: 'bottom'
        },
        grid: {
          left: 20,
          right: 20,
          top: 20,
          bottom: 40,
          containLabel: true
        },
        series: [{
          name: plugin.lang('order.pay'),
          selectedMode: 'single',
          label: {
            show: false,
            position: 'center',
            formatter: '{b}\n{d}%',
            fontSize: 16,
            fontWeight: 'bold',
            lineHeight: 25,
          },
          emphasis: {
            label: {
              show: false,
            }
          },
          select: {
            label: {
              show: true
            }
          },
          type: 'pie',
          radius: ['50%', '70%'],
          data: pay.value
        }]
      }

      option.value = data
    }

    const option = ref({})

    // 图表更新
    watch(pay, () => {
      buildCharts()
    }, { deep: true })

    // 首次加载
    buildCharts()

    return {
      money: app.money,
      plugin,
      charts,
      option,
    }
  }
}
</script>